<template>
    <div class="app-container">
        <div class="warp_padding">
            <div class="head-container">
                <!-- 搜索 -->
                <el-input v-model="formDate.userId" clearable placeholder="输入用户名搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>
                <el-button class="filter-item" size="mini" type="primary"  icon="el-icon-search" @click="toQuery">搜索</el-button>
            </div>
            
            <!-- 表格 -->
            <el-table :data="lists" highlight-current-row v-loading="listLoading"  style="width: 100%;"  :max-height="fixedTable">

                <el-table-column type="index" width="45">
                </el-table-column>

                <el-table-column prop="userId" label="用户名"  width="120px"  sortable></el-table-column>
                <el-table-column prop="ip" label="ip" width="150px"  sortable></el-table-column>
                <!-- <el-table-column prop="sort" align="center" width="150px" label="请求时间">
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.sort }}</el-tag>
                    </template>
                </el-table-column> -->

                <el-table-column prop="method" :show-overflow-tooltip="true" label="方法名称"  sortable min-width="100"></el-table-column>
                <el-table-column prop="operation" label="描述"  :show-overflow-tooltip="true"  min-width="130" sortable></el-table-column>
                <el-table-column prop="params" label="参数"  :show-overflow-tooltip="true"  min-width="100" sortable></el-table-column>
                <el-table-column prop="createtime" label="创建日期" sortable min-width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.createtime | formatDate}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>

    </div>
</template>


<script>
// import { formatDate } from '@/utils/formatDate.js'
import { parseTime } from '@/utils/index'
import { logsList } from '@/api/request'
import { mapState } from 'vuex'
import utils from '@/utils/timeStamp'
export default {
computed: {
   // ...mapState(["fixedTable"]),
},
    filters: {
        formatDate(time) {
            return utils.formatDate.format(new Date(),'yyyy-MM-dd hh:mm:ss')
        }, 
    },
  data() {
    return {
        fixedTable:'700',
        columns: [
            {
              text: '用户名',
              value: 'userId'
            }
        ],
        delLoading: false,
        pageCount: 0,
        total:0,  //总数
        listLoading: false,
        lists: [],
        pagerCount:11,   //页码按钮的数量，当总页数超过该值时会折叠,大于等于 5 且小于等于 21 的奇数
        formDate:{
            pageNo: 1,  
            pageSize:10,
            userId:''   
        },
    }
  },
  created() {
    this.$nextTick(() => {
        this.init()
    })
  },
  methods: {
    parseTime,
    toQuery(){
        this.init()
    },
    handleCurrentChange(val) {
        this.formDate.pageNo = val;
        this.init()
    },
    handleSizeChange(val) {
        this.formDate.pageSize = val
        this.init()
        // console.log(`page ${val}`);
    },
    init(){
        this.formDate.userId = this.formDate.userId.trim()
        logsList(this.formDate).then(res => {
           let { list, total } = res
           this.lists = list
           this.total = total
        })
    },
    
    
  }
}
</script>

<style lang="scss" scoped>

</style>
